<template>
  <div class="_wz_accountSafetyFacilityDetails">


    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
      </colgroup>
      <tbody>
        <tr>
          <td style="font-weight: 600;position:relative;" colspan="6"> {{ selectData.noticeTitle }}</td>
        </tr>
        <tr>
          <td>通知等级</td>
          <td colspan="2" v-if="selectData.noticeLv == 1"> 普通 </td>
          <td colspan="2" v-if="selectData.noticeLv == 2"> 重要 </td>
          <td colspan="2" v-if="selectData.noticeLv == 3" style="color: red;"> 严重 </td>
          <td>通知人员</td>
          <td colspan="2">{{ selectData.govContact }}</td>
        </tr>
        <tr>
          <td>文件下发</td>
          <td colspan="2" v-if="selectData.noticeFileType == 1">是</td>
          <td>回复时间</td>
          <td colspan="2" v-if="selectData.noticeReplyType == 1">{{ selectData.noticeEndTime }}</td>
        </tr>

        <tr>
          <td>通知回复状态</td>
          <td colspan="2"> {{ selectData.noticeReplyType == 1 ? '需要回复' : '不需要回复' }}</td>


          <td> 主管单位名称 </td>
          <td colspan="2" v-if="selectData.noticeReplyType == 1">{{ selectData.govName }} </td>
        </tr>

        <tr>
          <td> 通知内容</td>
          <td colspan="5" v-html="selectData.noticeContent"></td>

        </tr>
      </tbody>
    </table>

    <Divider>通知回复 </Divider>


    <!-- <Form ref="formAdd" :model="formData" label-position="right" :label-width="110" :rules="ruleValidate"> -->
    <!-- <FormItem label="通知标题" prop="noticeTitle">
        <i-input v-model="formData.noticeTitle" placeholder="请填写通知标题" clearable />
      </FormItem>

      <Row>
        <Col span="8">
        <FormItem label="通知等级" prop="noticeLv">
          <i-select v-model.number="formData.noticeLv" filterable placeholder="请选择通知等级" clearable>
            <Option :value="1">普通</Option>
            <Option :value="2">重要</Option>
            <Option :value="3">紧急</Option>
          </i-select>
        </FormItem>
        </Col>
        <Col span="16">
        <FormItem label="通知人员" prop="orgContact">
          <i-input v-model="formData.orgContact" placeholder="请填写通知人员" clearable />
        </FormItem>
        </Col>
      </Row>

      <Row style="height: 58px;">
        <Col span="8">
        <FormItem label="文件下发" prop="noticeFileType">
          <i-switch v-model.number="formData.noticeFileType" :false-value="0" :true-value="1">
            <template #open><span>开</span></template>
            <template #close><span>关</span></template>
          </i-switch>
        </FormItem>
        </Col>
        <Col span="16" v-if="formData.noticeFileType">
        <FormItem label="通知附件" prop="multipartFile">
          <Upload name="multipartFile" :before-upload="handleUpload" action="" style="display: inline-block;">
            <Button type="primary" icon="ios-cloud-upload-outline">上传附件(仅支持mp4、docx)</Button>
            {{ fileData.name }}
          </Upload>
          <Button type="primary" icon="md-cloud-download" v-if="!!formData.noticeFileUrl && !fileData.name"
            style="margin: 0 0 0 10px;" @click="dateienHerunterladen">下载文件</Button>
        </FormItem>
        </Col>
      </Row>

      <Row>
        <Col span="8">
        <FormItem label="回复状态" prop="noticeReplyType">
          <i-switch v-model.number="formData.noticeReplyType" :false-value="0" :true-value="1">
            <template #open><span>开</span></template>
            <template #close><span>关</span></template>
          </i-switch>
        </FormItem>
        </Col>
        <Col span="16" v-if="formData.noticeReplyType">
        <FormItem label="回复时间" prop="noticeEndTime">
          <DatePicker type="datetime" v-model="formData.noticeEndTime" show-week-numbers placeholder="请选择回复时间" />
        </FormItem>
        </Col>
      </Row> -->
    <!-- <FormItem label="通知内容" prop="noticeContent"> -->
    <div class="uplaodFile">
      <!-- <Upload name="multipartFile" :before-upload="handleUpload" action="" style="display: inline-block;">
        <Button type="primary" icon="ios-cloud-upload-outline">上传附件</Button>
        {{ fileData.name }}
      </Upload> -->

      <Upload multiple action="" :before-upload="handleUpload"> <Button icon="ios-cloud-upload-outline">文件上传</Button>
      </Upload>
      <div class="fileList">
        <p v-if="fileData.data != null">
          文件名称：{{ fileData.name }}
          <Icon type="md-close" style="cursor: pointer;font-size:20px" @click="delFile" />
        </p>

      </div>



    </div>
    <div style="border: 1px solid #ccc;">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef"
        :defaultConfig="{ excludeKeys: ['insertLink', 'group-image', 'fullScreen', 'group-video'] }" mode='default' />
      <Editor style="height: 500px; overflow-y: hidden;" v-model="formData.replyContext"
        :defaultConfig="{ placeholder: '请输入内容...' }" mode='default' @onCreated="handleCreated" />
    </div>


    <!-- </FormItem> -->
    <!-- </Form> -->



    <div class="demo-drawer-footer">
      <Button style="margin-right: 8px" type="primary" @click="addSubmit"
        :disabled="selectData.noticeReplyType != 1">提交</Button>
      <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
    </div>


  </div>
</template>
<script>


import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  toRefs,
  toRef,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  defineComponent,
  toRaw,
  watch,
  resolveComponent,
  shallowRef
} from 'vue'
import { useRouter, useRoute } from "vue-router";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex
import wzTbale from "../../components/table/index.vue";
//reactive
export default defineComponent({
  name: 'personnelParameterDetails',//组件名称
  components: {
    wzTbale, Editor, Toolbar
  },//组件引用
  props: ['selectData'],//接收来自父组件的数据
  setup(props, context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $common = inject('$common');//自己封装的方法


    const state = reactive({
      transportTypeList: [],//运输类型
      current: 0,//当前状态
      formData: {
        replyContext: ""
      },//表单数据
      fileData: {
        data: null,
        name: '',
      },


    });


    //编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()
    // 记录 editor 实例，重要！
    const handleCreated = (editor) => {
      editorRef.value = editor
    }


    let addSubmit = () => {
      let formData = new FormData();

      if (state.formData.replyContext == '<p><br></p>' || state.formData.replyContext == '') {
        $ViewUIPlus.Message.error('请填写内容');
        return
      }
      if (state.fileData.data != null) {
        formData.append("multipartFile", state.fileData.data);
      }

      let  allData =Object.assign(props.selectData,{"uuid": props.selectData.uuid,"replyContext":state.formData.replyContext})  
      for (let key in allData) {
        formData.append(key, allData[key]);
      }

      // formData.append("uuid", props.selectData.uuid)
      // formData.append("replyContext", state.formData.replyContext);


      $axios.post(apiUrl.noticeGovRecordNoticeGovMessageRecordReply, formData).then((res) => {
        if (res.data.code == 0) {
          $ViewUIPlus.Message.success('保存成功');
          context.emit('closeFun', true)
        } else {
          $ViewUIPlus.Message.error('保存失败');
        }
      }).catch((err) => {
        console.log("失败", err)
      })
    }


    const handleUpload = (file) => {
      state.fileData.data = file;
      state.fileData.name = file.name;
      // let type = file.name.substr(file.name.lastIndexOf(".") + 1);
      // if (type == "MP4" || type == "mp4") {//视频
      //   state.formData.noticeFileType = 1;
      //   state.fileData.data = file;
      //   state.fileData.name = file.name;
      // } else if (type == "DOCX" || type == "docx") {//word
      //   state.formData.noticeFileType = 2;
      //   state.fileData.data = file;
      //   state.fileData.name = file.name;
      // } else {
      //   $ViewUIPlus.Message.error('您上传的文件类型不匹配');
      //   return false;
      // }
      // return false;
    }

    let delFile = () => {
      state.fileData = { data: null, name: '', }
    }
    // 其他的生命周期
    onBeforeMount(() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted(() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

      // $axios.post(apiUrl.noticeGovRecordNoticeGovMessageRecordRead, { uuid: props.selectData.uuid }).then((res) => {  //消息已读
      //   if (res.data.code == 0) {
      //     $ViewUIPlus.Message.success('消息已读');
         
      //   } else {
      //     // $ViewUIPlus.Message.error('保存失败');
      //   }

      // })

    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate(() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated(() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount(() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted(() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      apiUrl,
      editorRef,//编辑器实例，必须用 shallowRef
      handleCreated,//记录 editor 实例，重要！
      addSubmit,
      handleUpload,
      delFile
    }
  }
})


</script>
<style lang="less">
._wz_accountSafetyFacilityDetails {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;

  table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px !important;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border: 1px solid #515a6e;
      padding: 0 10px;
      word-break: break-word;
    }
  }
}
</style>
